<template>
	<view class="container">
		<view class="cont-box">
			<view class="dis-flex search-input-box">
				<view class="search-input">
					<view class="dis-flex search-box">
						<view class="left"><icon color="rgba(180,180,180,1)" size="15" type="search"></icon></view>
						<view class="right"><input v-model="searchValue" class="input" focus="true" placeholder="请输入您搜索的商品" placeholderStyle="color:#aba9a9" type="text" /></view>
					</view>
				</view>
				<view class="serch-button"><button @tap="search" type="warn">搜索</button></view>
			</view>
			<view class="search-cont-box" v-if="recentSearch.length">
				<view class="title-box">
					最近搜索
					<text @tap="clearSearch" class="suifont sui-lajixiang col-7"></text>
				</view>
				<view class="sale-button-box">
					<view class="seconds-kill-li" v-for="(recent, idx) in recentSearch" :key="recent.hotrecent">
						<view @tap="goSearch" class="recent-button" :data-text="recent">{{ recent }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			recentSearch: [],
			searchValue: ''
		};
	},
	onShow: function() {
		// 获取历史搜索
		this.getRecentSearch();
	},
	methods: {
		/**
		 * 获取历史搜索
		 */
		getRecentSearch() {
			this.recentSearch = uni.getStorageSync('recentSearch') || [];
		},
		/**
		 * 搜索提交
		 */
		search() {
			if (this.searchValue) {
				// 记录最近搜索
				let recentSearch = wx.getStorageSync('recentSearch') || [];
				let index = recentSearch.indexOf(this.searchValue);
				index > -1 && recentSearch.splice(index, 1);
				recentSearch.unshift(this.searchValue);
				uni.setStorageSync('recentSearch', recentSearch);
				// 跳转到商品列表页
				this.navigateTo({
					url: '/pageShop/category/list?search=' + this.searchValue
				});
			}
		},
		/**
		 * 清空最近搜索记录
		 */
		clearSearch() {
			uni.removeStorageSync('recentSearch');
			this.getRecentSearch();
		},

		/**
		 * 跳转到最近搜索
		 */
		goSearch(e) {
			this.navigateTo({
				url: '/pageShop/category/list?search=' + e.target.dataset.text
			});
		}
	}
};
</script>

<style lang="scss">
.seconds-kill-li {
	padding: 10rpx;
	box-sizing: border-box;
	float: left;
}

.title-box {
	font-size: 10pt;
	padding: 50rpx 0 0 0;
	color: #777;
}

.title-box .icon-lajixiang {
	float: right;
}

.sale-button-box {
	padding: 10px 0;
	overflow: hidden;
}

.sale-button,
.recent-button {
	background: #fff;
	border-radius: 50px;
	justify-content: center;
	text-align: center;
	font-size: 26rpx;
	border: 1px solid #ccc;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	height: 30rpx;
	line-height: 30rpx;
	padding: 10rpx 50rpx;
	box-sizing: content-box;
}

.serch-button button {
	background: $theme-main-color;
}

/* asd */

.search-input-box {
	height: 64rpx;
}

.search-input {
	width: 80%;
	background: #fff;
	border-radius: 5px 0 0 5px;
	padding-left: 10rpx;
	box-sizing: border-box;
	overflow: hidden;
}

.search-input input {
	font-size: 30rpx;
	height: 64rpx;
	line-height: 64rpx;
}

.serch-button {
	width: 20%;
	box-sizing: border-box;
}

.serch-button button {
	line-height: 64rpx;
	height: 64rpx;
	font-size: 28rpx;
	border-radius: 0 5px 5px 0;
}

.seconds-kill-li {
	padding: 10rpx;
	box-sizing: border-box;
}

.title-box {
	font-size: 10pt;
	padding: 50rpx 0 0 0;
	color: #777;
}

.search-cont {
	padding: 0 15px;
	background: #fff;
}

.search-box .left {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
}

.search-box .right {
	flex: 1;
}

.sale-button-box .seconds-kill-li {
	float: left;
}

.title-box image {
	width: 35rpx;
	height: 35rpx;
	float: right;
}
</style>
